<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- card -->
    <el-card>
      <el-row>
        <el-col :span="6">
          <el-input v-model="searchItem" placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="2" :offset="14">
          <el-button type="success" size="small" @click="addUserDialog = true"
            >添加用户</el-button
          >
        </el-col>
        <el-col :span="2">
          <el-button type="danger" size="small" @click="deleteUser"
            >删除用户</el-button
          >
        </el-col>
      </el-row>
      <!-- 用户列表 -->
      <el-table
        @select-all="select_all"
        @select="singel_select"
        stripe
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="index" label="#"> </el-table-column>

        <el-table-column prop="date" label="日期" width="150">
        </el-table-column>

        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="province" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="120">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >

            <el-button type="text" size="small" @click="update(scope.row.index)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page.sync="currentPage3"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="100"
      >
      </el-pagination>

      <!-- 添加用户弹出层 -->
      <el-dialog
        title="添加用户"
        :visible.sync="addUserDialog"
        :before-close="handleClose"
      >
        <el-form
          :model="addUserInfro"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          state: true,
          zip: 200333, -->
          <el-form-item label="用户名称" prop="name">
            <el-input v-model="addUserInfro.name"></el-input>
          </el-form-item>
          <el-form-item label="时间" prop="date">
            <el-date-picker
              v-model="addUserInfro.date"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
              >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetAddUserInfo">重置</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    //全选事件
    select_all(allrow) {
      this.selectDatas = allrow;
    },
    //单选事件
    singel_select(a, b) {
      this.selectDatas = a;
    },
    //删除用户
    deleteUser() {
      let names = this.selectDatas.map((user) => user.name);
      console.log(names);
    },
    //添加用户
    addUser() {
        if(this.addUserInfro.index != ''){
            this.addUserDialog = false
           return;
        }
      //jQuery.extend(b,a);//把a复制给b
      let newUser = {};
      this.$jquery.extend(newUser, this.addUserInfro);
      this.tableData.unshift(newUser);
      this.addUserDialog = false;
      this.resetAddUserInfo();
      this.$message.success("添加成功");
    },
    //reset 添加用户信息
    resetAddUserInfo() {
      this.addUserInfro.name = "";
      this.addUserInfro.date = "";
    },
    //编辑用户信息
    update(index) {
        this.tableData.forEach(user => {
            if(user.index == index){
                this.addUserInfro = user
                this.addUserDialog = true
            }
        })
    },
  },

  data() {
    return {
      addUserInfro: {
        index:'',
        name: "",
        date: "2012-2-3",
        state: true,
        zip: 200333,
      },
      addUserDialog: false,
      searchItem: "",
      selectDatas: [],
      tableData: [
        {
          index: 1,
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          state: true,
          zip: 200333,
        },
        {
          index: 2,
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          state: true,
          zip: 200333,
        },
        {
          index: 3,
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          state: true,
          zip: 200333,
        },
        {
          index: 4,
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          state: true,
          zip: 200333,
        },
      ],
    };
  },
};
</script>

<style>
.el-table {
  margin-top: 15px;
}

.el-pagination {
  margin-top: 15px;
}
</style>